Page({
  data: {
    canvasWidth: 320,
    canvasHeight: 370,
    gameStarted: false
  },

  onLoad() {
    // 页面加载时初始化
    this.initCanvas();
  },

  initCanvas() {
    const query = wx.createSelectorQuery();
    query.select('#chessCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        if (!res[0]) return;
        
        const canvas = res[0].node;
        const ctx = canvas.getContext('2d');
        const dpr = wx.getSystemInfoSync().pixelRatio;
        
        canvas.width = res[0].width * dpr;
        canvas.height = res[0].height * dpr;
        ctx.scale(dpr, dpr);
        
        this.canvas = canvas;
        this.ctx = ctx;
        
        // Load images for chess pieces
        this.loadChessImages();
      });
  },
  
  loadChessImages() {
    // Preload chess piece images
    this.chessImages = {};
    // 根据当前样式类型加载对应的棋子图片
    const stype = wx.getStorageSync('stype') || 'stype_1';
    
    // Use com.args from common.js to get correct piece mappings
    const com = require('../../utils/common.js');
    const pieceKeys = Object.keys(com.args);
    
    // 为每种棋子创建图像对象
    pieceKeys.forEach(key => {
      const img = this.canvas.createImage();
      // Using the img property from com.args to construct correct path
      img.src = `/img/${stype}/${com.args[key].img}.png`;
      this.chessImages[key] = img;
    });
  },

  startGame() {
    this.setData({
      gameStarted: true
    });
    
    // 初始化游戏逻辑
    this.initGame();
  },

  initGame() {
    // 引入中国象棋游戏逻辑
    const com = require('../../utils/common.js');
    const play = require('../../utils/play.js');
    
    // 设置全局对象模拟浏览器环境
    global.com = com;
    global.play = play;
    
    // 初始化游戏
    com.canvas = this.canvas;
    com.ct = this.ctx;
    
    // 初始化游戏参数
    const stype = wx.getStorageSync('stype') || 'stype1';
    // 修改: 使用正确的对象名 com 而不是 common
    com.init(stype);
    
    // 手动调用初始化函数替代window.onload
    // 修改: 使用正确的对象名 com 而不是 common
    com.initialize();
    
    // 初始化游戏状态
    play.init();
    
    this.game = play;
  },

  onTouchStart(e) {
    
    const com = require('../../utils/common.js');

    // 处理触摸开始事件
    if (!this.game || !this.game.isPlay) return;
    
    const touch = e.touches[0];
    // 获取canvas元素的位置信息
    const query = wx.createSelectorQuery();
    query.select('#chessCanvas').boundingClientRect(rect => {
      if (!rect) return;
      
      // 计算相对坐标
      const x = touch.clientX - rect.left;
      const y = touch.clientY - rect.top;
      
      // 转换为游戏坐标
      const domXY = {x: rect.left, y: rect.top};
      // 修改: 使用正确的对象名 com 而不是 common
      const gameX = Math.round((x - com.pointStartX) / com.spaceX);
      // 修改: 使用正确的对象名 com 而不是 common
      const gameY = Math.round((y - com.pointStartY) / com.spaceY);
      
      // 模拟点击事件对象
      const clickEvent = {
        pageX: touch.clientX,
        pageY: touch.clientY
      };
      
      // 处理点击事件
      this.game.clickCanvas(clickEvent);
    }).exec();
  },

  onTouchMove(e) {
    // 处理触摸移动事件
    if (!this.game) return;
    
    const touch = e.touches[0];
    // 获取canvas元素的位置信息
    const query = wx.createSelectorQuery();
    query.select('#chessCanvas').boundingClientRect(rect => {
      if (!rect) return;
      
      const x = touch.clientX - rect.left;
      const y = touch.clientY - rect.top;
      
      // 在移动端暂时不需要特殊处理移动事件
    }).exec();
  },

  onTouchEnd(e) {
    // 处理触摸结束事件
    if (!this.game) return;
    
    // 触摸结束事件在当前游戏中不需要特殊处理
  },

  undoMove() {
    // 悔棋功能
    if (this.game) {
      this.game.regret();
    }
  },

  resetGame() {
    // 重新开始游戏
    this.setData({
      gameStarted: false
    });
    
    if (this.game) {
      this.game.init();
    }
  }
});